<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>编辑用户</title>
<!-- layui的样式 -->
<link rel="stylesheet" href="/layui/css/layui.css">
</head>
<body>
<form class="layui-form">
	<!-- 姓名, 身份证号, 电话, 密码-->
	<div class="layui-form-item">
		<label class="layui-form-label">姓名</label>
		<div class="layui-input-inline">
			<input type="text" name="name" placeholder="请输入用户姓名"
				class="layui-input" required lay-verify="required">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">身份证号</label>
		<div class="layui-input-inline">
			<input type="text" name="idcard" placeholder="请输入用户的身份证号"
				class="layui-input" required lay-verify="required">
		</div>
	</div>
	
	<div class="layui-form-item">
		<label class="layui-form-label">电话</label>
		<div class="layui-input-inline">
			<input type="text" name="phone" placeholder="请输入用户电话号码"
				class="layui-input" required lay-verify="required">
		</div>
	</div>
	
	<div class="layui-form-item">
		<div class="layui-input-block">
			<input type="hidden" name="id">
			<button class="layui-btn" lay-submit lay-filter="user-edit">立即提交</button>
		</div>
	</div>
</form>

<!-- 引入layui的js文件 -->
<script type="text/javascript" src="/layui/layui.js"></script>

<script>
layui.use([ 'form' ], function() {
	var form = layui.form,
	$ = layui.$;
	
	//初始化表单元素
	var user = JSON.parse(sessionStorage.getItem('user'));
	$("input[name='id']").val(user.id);
	$("input[name='name']").val(user.name);
	$("input[name='idcard']").val(user.idcard);
	$("input[name='phone']").val(user.phone);
	
	/* 表单提交  */
	form.on('submit(user-edit)', function(data) {
		//ajax
		$.ajax({
			url : '/api/user/edit', //请求的地址
			data : data.field, //向服务器提交的参数,表单中填写的数据都放到了data.field
			type : 'post', //HTTP请求的方式，要与接口的请求方式保持一致
			dataType : 'json', //接口返回的数据类型,
			success : function(result) { //请求成功时的回调,result是服务器返回来的JSON格式的数据
				if (result.code > 0) {
					parent.layer.msg('编辑成功');
					parent.layer.closeAll('iframe');
				} else {
					layer.msg(result.msg);
				}
			},
			error : function() { //请求失败时的回调
				layer.msg('请求失败');
			}
		});
		return false;
	});

});
</script>

</body>

</html>